<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8' />
		<link rel="stylesheet" type="text/css" href="common.css" />
		<script type="text/javascript" src='jquery-1.8.2.min.js'></script>

	</head>
	<body>
		<div class='container'>
			<div>
				<div class='title'>Menu1</div>
				<div class='body'>
					<a href="">content1</a>
					<a href="">content2</a>
					<a href="">content3</a>
				</div>
			</div>

			<div>
				<div class='title'>Menu1</div>
				<div class='body hide'>
					<a href="">content1</a>
					<a href="">content2</a>
					<a href="">content3</a>
				</div>
			</div>

			<div>
				<div class='title'>Menu1</div>
				<div class='body hide'>
					<a href="">content1</a>
					<a href="">content2</a>
					<a href="">content3</a>
				</div>
			</div>
			
            <div>
				<div class='title'>Menu1</div>
				<div class='body hide'>
					<a href="">content1</a>
					<a href="">content2</a>
					<a href="">content3</a>
				</div>
			</div>
			
            <div>
				<div class='title'>Menu1</div>
				<div class='body hide'>
					<a href="">content1</a>
					<a href="">content2</a>
					<a href="">content3</a>
				</div>
			</div>

		</div>

		<script type="text/javascript">
			$(function(){
				$('.title').click(function(){
					$(this).parent().siblings().children('.body').addClass('hide');
					$(this).next().removeClass('hide');
				});
			});
		</script>
	</body>
</html>